<template>
    <div class="container-list">
        <p class="title">{{title}}<span class="iconfont" v-if="isIcon">&#xe6ab;</span></p>
        <ul class="list-wrap" v-if="!isSlot">
            <li class="item"
                v-for="item in array"
                :key="item"
                :style="{height: height+'px'}"
            >
                <p class="content">Serverless是目前比较热门的技术话题，各大云平台以及互联网大厂内部都在积极建设Serverless产品。本文将介绍美团Serverless产品在落地过程中的一些实践经验，其中包括技术选型的考量、系统的详细设计、系统稳定性优化、产品的周边生态建设以及在美团的落地情况。</p>
                <img class="img" :style="{'max-width': 3 * height + 'px'}" src="https://wwsszz.top/static/file/2021-05-15/2021-05-15a541c2946ba14f42a9bc43e82e0855a2.jpg" alt="">
            </li>
        </ul>
        <ul class="list-wrap" v-else>
            <slot></slot>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            title: {
              type: String,
              default: '我的收藏'
            },
            height: {
                type: String,
                default: '76'
            },
            isIcon: {
                type: Boolean,
                default: true
            },
            array: {
                type: Number,
                default: 2
            },
            isSlot: {
                tyep: Boolean,
                default: false
            }
        },
        methods: {
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/mixin";
  .container-list {
      width: 100%;
      height: 100%;
      padding: 14px 25px;
      box-sizing: border-box;
      border: 1px solid #bbb;
      border-radius: 20px;
      user-select: text;
      .title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          line-height: 30px;
          color: rgba(16, 16, 16, 100);
          font-size: 20px;
          .iconfont {
              font-size: 20px;
          }
      }
      .list-wrap {
          width: 100%;
          .item {
              display: flex;
              font-size: 14px;
              line-height: 20px;
              & + .item {
                  margin-top: 20px;
              }
              .content {
                  flex: 1;
                  position: relative;
                  margin-right: 5px;
                  @include overflow-ell(4)
              }
              .img {
                 overflow: hidden;
                 height: 100%;
                 object-fit: cover;
              }
          }
      }
  }
</style>
